<template>
  <div class="home-container">
    <!-- 头部 header-->
    <div class="home-header">
      <el-menu class="el-menu-demo" background-color="#545c64" text-color="#fff" mode="horizontal">
        <el-menu-item index="0">
          <div class="logo">
            <img src="../assets/logo.png" alt="" />
            <b>后台管理系统</b>
          </div>
        </el-menu-item>
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-submenu index="2">
          <template slot="title">我的工作台</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="3">消息中心</el-menu-item>
        <el-menu-item index="4">订单管理</el-menu-item>
        <el-menu-item index="5">
          <el-dropdown>
            <div class="avatar">
              <img src="../assets/imgs/avatar.jpg" alt="" />
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>我的</el-dropdown-item>
              <el-dropdown-item>设置</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 内容 content -->
    <div class="home-content">
      <!-- 侧边栏 aside -->
      <div class="content-aside">
        <el-menu
          router
          :default-active="$route.path"
          unique-opened
          background-color="#545c64"
          text-color="#fff"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
        >
          <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <!-- 自定义图标 -->
              <i :class="iconList[item.id]"></i>
              <span slot="title">{{ item.authName }}</span>
            </template>
            <el-menu-item-group v-for="subItem in item.children" :key="subItem.id">
              <el-menu-item :index="'/home/' + subItem.path" >{{ subItem.authName }}</el-menu-item>
              <!-- 绑定事件保存 -->
              <!-- <el-menu-item :index="'/home/' + subItem.path" @click.native="savePath(subItem.path)">{{ subItem.authName }}</el-menu-item> -->
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <!-- 主体 main -->
      <div class="content-main plt">
        <el-button :icon="foldIcon" @click="toggle" :label="false"></el-button>
        <!-- 预留一个位置 将来侧边栏的渲染结果在此 -->
        <router-view class='mt'></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      // 控制侧边栏是否展开
      isCollapse: false,
      // 展开与收缩的图标
      foldIcon: 'el-icon-s-unfold',
      // 菜单列表
      menuList: [],
      // 储存图标
      iconList: {
        125: 'el-icon-user-solid',
        103: 'el-icon-s-tools',
        101: 'el-icon-s-goods',
        102: 'el-icon-s-order',
        145: 'el-icon-s-data',
      },
      // 默认激活的
      activePath: '',
    }
  },
  watch:{
    '$route.path'(){
      return this.$route.path
    }
  },
  methods: {
    // aside相关方法
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    // 切换展开与收缩
    toggle() {
      // 对展开与收缩的状态进行取反
      this.isCollapse = !this.isCollapse
      // 根据isCollapse状态来修改其图标样式
      this.isCollapse ? (this.foldIcon = 'el-icon-s-fold') : (this.foldIcon = 'el-icon-s-unfold')
    },
    // 获取侧边栏菜单
    async getMenuList() {
      const { data } = await this.$http.get('/menus')
      this.menuList = data.data
    },
    // 退出
    logout() {
      // 移除sessionStroage的token
      sessionStorage.removeItem('token')
      // 跳转到login页面
      this.$router.push('/login')
    },
    // savePath(path) {
    //   sessionStorage.setItem('path', '/home/' + path)
    //   console.log(this.$route.path)
    // },
  },
  created() {
    this.getMenuList()
    // 从sessionStorage
    // this.activePath = sessionStorage.getItem('path')
  },
}
</script>

<style lang="less">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.home-content {
  display: flex;
  padding-right: 20px;
}
.content-main{
  flex: 1;
}
.el-icon-arrow-down {
  font-size: 12px;
}
// logo相关
.logo {
  width: 50px;
  height: 50px;
  img {
    width: 100%;
    height: 100%;
  }
}
.home-header {
  .el-menu-item:first-child {
    margin-right: 110px;
  }
  .el-menu-item:last-child {
    float: right;
  }
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    top: -11px;
    right: 15px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
</style>
